<template>
  <div class="base-view-wrapper flex-column">
    <el-form :inline="true" :model="filterData" class="search">
      <!--
      <el-form-item label="">
        <el-input
          clearable
          placeholder="请输入角色名称"
          v-model="filterData.name"
        />
      </el-form-item>
      -->
      <el-form-item>
        <el-button-group style="margin-right: 6px">
          <el-button :icon="ArrowRight" type="info" @click="closeRowExpansion" plain>
            折叠
          </el-button>
          <el-button :icon="ArrowDown" type="info" @click="openRowExpansion" plain>
            展开
          </el-button>
        </el-button-group>
        <el-button :icon="Search" @click="getTableData" />
        <el-button type="primary" @click="editFormVisible = true" plain style="margin-left: 5px">
          + 新增
        </el-button>
      </el-form-item>
    </el-form>

    <div id="table_contain" class="flex-100">
      <CustomTable
        ref="tableRef"
        :height="tableHeight"
        row-key="id"
        :columns="tableData.columns"
        v-loading="tableData.loading"
        :data="tableData.data"
      >
        <template #state="{ row }">
          {{ row.state == 1 ? '启用' : '禁用' }}
        </template>
        <template #edit="{ row }">
          <el-button
            size="small"
            :style="{
              visibility: row?.parentId !== '0' ? 'hidden' : 'visible'
            }"
            :disabled="row?.parentId !== '0'"
            :icon="Plus"
            type="primary"
            plain
            @click="add(row)"
          >
            子菜单
          </el-button>
          <el-button size="small" :icon="Edit" plain type="warning" @click="edit(row)">
            编辑
          </el-button>
          <el-button size="small" :icon="Delete" type="danger" plain @click="del(row)">
            删除
          </el-button>
        </template>
      </CustomTable>
    </div>

    <MenuEditForm
      v-model:visible="editFormVisible"
      v-model:data="rowData"
      :parent-menu-option="tableData.data"
      @submit="getTableData"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { deleteSysMenu, selectMenuList, selectSysMenuById } from '@/api/system'
import CustomTable from '@/components/CustomTable'
import { ElMessage, ElMessageBox } from 'element-plus'
import MenuEditForm from './components/MenuEditForm.vue'
import { ArrowDown, ArrowRight, Delete, Edit, Plus, Search } from '@element-plus/icons-vue'
import { useCalcTableHeight } from '@/hooks/useCalcTableHeight'

let rowData: any
let filterData = reactive({ name: '' })
const editFormVisible = ref<boolean>(false)
const tableRef = ref()
const pageData = reactive({
  pageSize: 15,
  pageNum: 1
})
const { tableHeight } = useCalcTableHeight()
const tableData = reactive({
  columns: [
    { label: '菜单名称', prop: 'menuName', width: 230, align: 'left' },
    { label: '路由地址', prop: 'menuUrl', width: 200, align: 'left' },
    { label: '组件路径', prop: 'component', width: 300, align: 'left' },
    { label: '排序', prop: 'sort', width: 60 },
    { label: '状态', prop: 'state', template: true, width: 70 },
    { prop: 'edit', label: '操作', template: true, width: 280 }
  ],
  loading: true,
  total: 0,
  data: []
})

async function getTableData() {
  tableData.loading = true
  const { data, success, msg } = await selectMenuList(filterData)
  if (!success) {
    ElMessage.error(msg)
    return
  }
  tableData.loading = false
  tableData.data = data
  tableData.total = data?.total
}

async function add(row: any) {
  rowData = { parentId: row.id }
  editFormVisible.value = true
}

async function edit(row: any) {
  const { data, success } = await selectSysMenuById({ id: row?.id })
  if (!success) {
    return
  }
  rowData = data
  editFormVisible.value = true
}

async function del(row: any) {
  ElMessageBox.confirm(`是否删除${row?.menuName}?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    tableData.loading = true
    const { success, msg } = await deleteSysMenu({ id: row?.id })
    if (!success) {
      tableData.loading = false
      ElMessage.error(msg)
      return
    }
    ElMessage.success('操作成功')
    await getTableData()
  })
}

const TabData = (data: any[], status: any) => {
  //循环数据赋值
  data.forEach((i: any) => {
    tableRef.value.elTableRef.toggleRowExpansion(i, status)
    if (i.children) {
      forArr(i.children, status)
    }
  })
}

const forArr = (arr: any[], status: any) => {
  //关闭展开逻辑
  arr.forEach((i: any) => {
    tableRef.value.elTableRef.toggleRowExpansion(i, status)
    if (i.children) {
      forArr(i.children, status)
    }
  })
}

const openRowExpansion = () => {
  //展开
  TabData(tableData.data, true)
}

const closeRowExpansion = () => {
  //关闭
  TabData(tableData.data, false)
}

watch(pageData, async () => {
  await getTableData()
})

watch(filterData, async () => {
  pageData.pageNum = 1
  await getTableData()
})

onMounted(async () => {
  await getTableData()
})
</script>

<style scoped lang="scss"></style>
